<template>
  <div id="app">
    <div class="home-page">
      <!-- 顶部导航栏 -->
      <el-header class="navbar">
        <div class="logo">思不罔学习平台</div>
        <el-menu mode="horizontal" :default-active="activeMenu" @select="handleSelect">
          <el-menu-item index="1" @click="goBackHome">首页</el-menu-item>
          <el-menu-item index="2" @click="goToPersonal">个人中心</el-menu-item>
          <el-menu-item index="3" @click="goToCollection">我的收藏</el-menu-item>
        </el-menu>
        <div class="auth-buttons">
          <el-button v-if="isAdmin" type="text" @click="goToAdmin">管理员入口</el-button>
          <el-button type="text" @click="logout">退出登录</el-button>
        </div>
      </el-header>

      <!-- 轮播图区域 -->
      <el-main class="carousel-wrapper">
        <el-carousel height="350px" indicator-position="outside" arrow="always" autoplay :interval="5000">
          <el-carousel-item v-for="(item, index) in banners" :key="index">
            <img :src="item.image" class="carousel-image" alt="轮播图" />
            <div class="banner-content">
              <h2 class="banner-title">{{ item.title }}</h2>
              <p class="banner-desc">{{ item.desc }}</p>
            </div>
          </el-carousel-item>
        </el-carousel>
      </el-main>

      <!-- 学习进度展示 -->
      <el-main class="progress-section">
        <h2 class="section-title" style="color: #77baf3">我的学习进度</h2>
        <div class="progress-container">
          <div
              class="progress-card"
              v-for="(p, i) in progresses"
              :key="i"
              @click="handleProgressClick(p.title)"
              style="cursor: pointer;"
          >
            <div class="progress-header">
              <div class="progress-title">{{ p.title }}</div>
              <div class="progress-icon">{{ p.icon }}</div>
            </div>
            <div class="progress-value">{{ p.value }}</div>
            <div class="progress-text">{{ p.text }}</div>
          </div>
        </div>

      </el-main>

      <!-- 功能区域 -->
      <el-main class="feature-section">
        <h2 class="section-title" style="color: #77baf3">多重核心功能，满足考试通关需求</h2>
        <el-row :gutter="25">
          <el-col :xs="24" :sm="12" :md="6" v-for="(feature, index) in features" :key="index">
            <el-card shadow="hover" class="feature-card" @click="goToClick(feature.title)">
              <img :src="feature.icon" class="feature-icon" />
              <div class="feature-title">{{ feature.title }}</div>
              <div class="feature-desc">{{ feature.desc }}</div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>

      <!-- 课程区域 -->
      <el-main class="course-section">
        <h2 class="section-title" style="color: #77baf3">热门精选课程</h2>
        <div class="course-grid">
          <div class="course-card" v-for="(course, index) in courses" :key="index">
            <img :src="course.image" class="course-image" alt="课程封面" />
            <div class="course-content">
              <h3 class="course-title">{{ course.title }}</h3>
              <div class="course-info">
                <div class="course-meta"><span>👨‍🏫 {{ course.teacher }}</span></div>
                <div class="course-meta"><span>👥 {{ course.students }}人学习</span></div>
              </div>
              <p class="course-desc">{{ course.desc }}</p>
              <el-button class="course-btn">开始学习</el-button>
            </div>
          </div>
        </div>
      </el-main>

      <!-- 底部 -->
      <div class="footer">
        <div class="footer-column">
          <h3 class="footer-title">思不罔学习平台</h3>
          <p style="color: var(--text-light); line-height: 1.8; max-width: 300px;">
            专注于提供优质在线学习资源，涵盖各类考试题库、学习资料和课程，助力您的学习之路。
          </p>
        </div>
        <div class="footer-column">
          <h3 class="footer-title">快速链接</h3>
          <ul class="footer-links">
            <li><a href="#"><span>🏠</span> 首页</a></li>
            <li><a href="#"><span>📚</span> 全部课程</a></li>
            <li><a href="#"><span>📝</span> 题库中心</a></li>
            <li><a href="#"><span>🎓</span> 学习路径</a></li>
          </ul>
        </div>
        <div class="footer-column">
          <h3 class="footer-title">学习资源</h3>
          <ul class="footer-links">
            <li><a href="#"><span>📄</span> 学习资料</a></li>
            <li><a href="#"><span>🎬</span> 视频课程</a></li>
            <li><a href="#"><span>📱</span> 移动应用</a></li>
            <li><a href="#"><span>💡</span> 学习技巧</a></li>
          </ul>
        </div>
        <div class="footer-column">
          <h3 class="footer-title">联系我们</h3>
          <ul class="footer-links">
            <li><a href="#"><span>📧</span> contact@sierwang.com</a></li>
            <li><a href="#"><span>📞</span> 400-123-4567</a></li>
            <li><a href="#"><span>🏢</span> 北京市海淀区科技园</a></li>
          </ul>
        </div>
      </div>
      <div class="copyright">
        © 2023 思不罔学习平台 版权所有 | 京ICP备12345678号
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import router from "@/router";
import {ElMessage} from "element-plus";
import axios from "@/api/server";
import { useUserStore } from '@/store/useUserstore';

const userStore = useUserStore();

const userInfoStr = localStorage.getItem('userInfo');
if (userInfoStr) {
  const userInfo = JSON.parse(userInfoStr);
  userStore.setUserInfo(userInfo);
}

const isAdmin = useUserStore().userInfo.isAdmin;

const activeMenu = ref('1')

const banners = ref([
  {
    image: 'https://images.unsplash.com/photo-1498243691581-b145c3f54a5a?...',
    title: '高效学习，从这里开始',
    desc: '精选海量题库，个性化学习路径，助您轻松应对各类考试'
  },
  {
    image: 'https://images.unsplash.com/photo-1523580494863-6f3031224c94?...',
    title: '智能学习分析系统',
    desc: '基于AI的学习评估，精准定位薄弱环节，提升学习效率'
  },
  {
    image: 'https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?...',
    title: '加入学习社区',
    desc: '与千万学员共同进步，分享学习心得，解答疑难问题'
  }
])

const progresses = ref([
  { title: '排行榜', icon: '🏆',value: '看看你上榜了吗？'},
  { title: '错题册', icon: '❌' ,value: '温故而知新'},
  { title: '学习连续', icon: '🔥', value: '16 天', text: '再坚持 9 天解锁成就' }
])

const features = ref([
  { title: '顺序练习', icon: 'https://img.icons8.com/ios/100/4361ee/learning.png', desc: '按照知识体系循序渐进，系统掌握全部知识点' },
  { title: '随机练习', icon: 'https://img.icons8.com/ios-filled/100/4361ee/shuffle.png', desc: '随机抽取题目，全面检验知识掌握情况' },
  { title: '学习建议', icon: 'https://img.icons8.com/ios/100/4361ee/idea.png', desc: '智能分析学习数据，提供个性化学习方案' },
  { title: '题型练习', icon: 'https://img.icons8.com/ios/100/4361ee/test-passed.png', desc: '按题目类型专项突破，攻克薄弱环节' }
])

const courses = ref([
  {
    image: 'https://images.unsplash.com/photo-1553877522-43269d4ea984?...',
    title: '前端开发实战',
    teacher: '张教授',
    students: '5421',
    desc: '从零开始学习现代前端开发技术，包含Vue、React等主流框架实战'
  },
  {
    image: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?...',
    title: '数据分析与可视化',
    teacher: '李博士',
    students: '3245',
    desc: '掌握Python数据分析核心技能，学习使用Matplotlib、Seaborn等工具进行数据可视化'
  },
  {
    image: 'https://images.unsplash.com/photo-1550439062-609e1531270e?...',
    title: 'Java高级编程',
    teacher: '王高级工程师',
    students: '4187',
    desc: '深入理解Java核心原理，掌握多线程、网络编程、JVM调优等高级技术'
  },
  {
    image: 'https://images.unsplash.com/photo-1542626991-cbc4e32524cc?...',
    title: '人工智能入门',
    teacher: '赵研究员',
    students: '6890',
    desc: '了解机器学习基础概念，学习使用TensorFlow、PyTorch构建简单AI模型'
  }
])

const handleSelect = (index) => console.log('当前菜单项：', index)

const goToClick = (title) => {
  switch (title) {
    case '顺序练习':
      router.push('/order');
      break;
    case '随机练习':
      router.push('/random');
      break;
    case '学习建议':
      router.push('/advise');
      break;
    case '题型练习':
      router.push('/type');
      break;
  }
};

const handleProgressClick = (title) => {
  if (title === '错题册') {
    router.push('/wrong');
  }
  else if (title === '排行榜') {
    router.push('/rank');
  }
};

//wjb
const goToAdmin = () => {
  router.push('/admin/manage');
};

const goBackHome = () => router.push('/home');
const goToPersonal = () => router.push('/personal');
const goToCollection = () => router.push('/collection');
const logout = async () => {
  try {
    await axios.post('/users/logout'); // 会自动带上 Bearer token
    localStorage.removeItem('token');
    localStorage.removeItem('userInfo');
    ElMessage.success('退出成功');
    await router.push('/');
  } catch (error) {
    console.error('退出失败：', error);
    ElMessage.error('退出失败');
  }
};
</script>

<style>
  @import '../styles/Home.css';
</style>